<template>
	<view class="comp-smithy-strengthen">
		<view :class="['equip-box',`equip-${index+1}`,current == index ? 'active' : '']" v-for="(item,index) in 8" :key="index" @click="current = index">
			<view class="strengthen-level">
				+{{player.strengthen[index]}}
			</view>	
		</view>
		<view class="strengthen-content">
			
			<view class="current-equip">
				<view class="strengthen-level">+{{player.strengthen[current]}}</view>
				<view class="equip-name">{{equip_name[current]}}</view>
			</view>
			<view class="success-rate">成功率：{{this.$formula.success_rate(player.strengthen[current])}}%</view>
			
			<view class="strengthen-attr">
				<view class="strengthen-attr-hd">
					<view class="label">当前属性</view><view class="label">下级属性</view>
				</view>
				<view class="strengthen-attr-bd">
					<block v-if="current == 0 || current == 3 || current == 5">
						<view class="label">物攻 {{player.strengthen[current]}}-{{player.strengthen[current]}}</view><view class="label" style="color:var(--color-green)">物攻 {{player.strengthen[current]+1}}-{{player.strengthen[current]+1}}</view>
					</block>
					<block v-if="current == 1 || current == 2 || current == 4">
						<view class="label">物防 {{player.strengthen[current]}}-{{player.strengthen[current]}}</view><view class="label" style="color:var(--color-green)">物防 {{player.strengthen[current]+1}}-{{player.strengthen[current]+1}}</view>
					</block>
					<block v-if="current == 6 || current == 7">
						<view class="label">血量 {{player.strengthen[current] * 2}}</view><view class="label" style="color:var(--color-green)">血量 {{(player.strengthen[current]+1) * 2}}</view>
					</block>
				</view>
			</view>
			
			<view class="need-resource">
				<view class="need-resource-hd">下级所需材料</view>
				<view class="need-resource-bd">
					<view class="need-resource-item">
						<view class="label">金币</view><view :class="['value',player.resource.coin < this.$formula.need_strengthen_resource(player.strengthen[current]).coin ? 'not-enough' : '']">{{this.$formula.need_strengthen_resource(player.strengthen[current]).coin}}</view>
					</view>
					<view class="need-resource-item">
						<view class="label">强化石</view><view :class="['value',player.resource.strengthen_stone < this.$formula.need_strengthen_resource(player.strengthen[current]).stone ? 'not-enough' : '']">{{this.$formula.need_strengthen_resource(player.strengthen[current]).stone}}</view>
					</view>
				</view>
			</view>
			
			<view class="strengthen-btn" @click="strengthen">强化</view>

			
		</view>
		
		<view class="help">
			<rich-text :nodes="$help.strengthen"></rich-text>
		</view>

	</view>
</template>

<script>
	import { mapState } from "vuex";
	import compEquipItem from "@/components/comp-equip-item/comp-equip-item"
	export default {
		name:"comp-smithy",
		components:{
			compEquipItem
		},
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				equip_name : getApp().globalData.equip_name,
				current : 0
			};
			
		},
		methods : {
			strengthen(){
				this.$store.commit('mod_player/commit_strengthen',this.current)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comp-smithy-strengthen{
		position: relative;
		height:100%;
		.equip-box{
			$boxSize:60px;
			$boxGap:20px;
			background-color: #21252b;
			width:$boxSize;
			height:$boxSize;
			border: 1px solid #000;
			position: absolute;
			border-radius: 4px;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			cursor: pointer;
			&.active{
				border: 1px solid var(--color-green);
			}
			.strengthen-level{
				position: absolute;
				bottom:2px;
				right:4px;
			}
			
			&::after{
				color:#777
			}
			
			&.equip-1{ //武器
				left:$boxGap;
				top:$boxGap;
				&::after{
					content : '武器'
				}
			}
			&.equip-2{ //衣服
				left:$boxGap;
				top:$boxSize + $boxGap * 2;
				&::after{
					content : '衣服'
				}
			}
			&.equip-3{ //手镯
				left:$boxGap;
				top:$boxSize * 2 + $boxGap * 3;
				&::after{
					content : '手镯'
				}
			}
			
			&.equip-4{ //戒指
				left:$boxGap;
				top:$boxSize * 3 + $boxGap * 4;
				&::after{
					content : '戒指'
				}
			}
			
			&.equip-5{ //头盔
				right:$boxGap;
				top:$boxGap;
				&::after{
					content : '头盔'
				}
			}
			
			&.equip-6{ //项链
				right:$boxGap;
				top:$boxSize + $boxGap * 2;
				&::after{
					content : '项链'
				}
			}
			
			&.equip-7{ //腰带
				right:$boxGap;
				top:$boxSize * 2 + $boxGap * 3;
				&::after{
					content : '腰带'
				}
			}
			
			&.equip-8{ //鞋子
				right:$boxGap;
				top:$boxSize * 3 + $boxGap * 4;
				&::after{
					content : '鞋子'
				}
			}
		}
		
		.strengthen-content{
			position: absolute;
			top:20px;
			left:110px;
			right:110px;
			height:400px;
			
			.current-equip{
				background-color: #21252b;
				width:80px;
				height:80px;
				border: 1px solid #000;
				border-radius: 4px;
				margin:0 auto 10px auto;
				display: flex;
				flex-direction: column;
				
				position: relative;
				.strengthen-level{
					background-color: $game-color-3;
					height:20px;
					border-bottom: 1px solid #000;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size:12px;
				}
				.equip-name{
					flex:1;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size:16px;
				}
			}
			
			.success-rate{
				text-align: center;
				color:var(--color-yellow);
				margin-bottom:18px;
			}
			
			.strengthen-attr{
				border: 1px solid #000;
				margin-bottom:20px;
				.strengthen-attr-hd{
					height:30px;
					display: flex;
					background-color: $game-color-2;
					border-bottom: 1px solid #000;
					.label{
						flex:1;
						border-right: 1px solid #000;
						display: flex;
						justify-content: center;
						align-items: center;
						&:last-child{
							border-right: none;
						}
					}
				}
				.strengthen-attr-bd{
					height:30px;
					display: flex;
					.label{
						flex:1;
						border-right: 1px solid #000;
						display: flex;
						justify-content: center;
						align-items: center;
						&:last-child{
							border-right: none;
						}
					}
				}
			}
			
			.need-resource{
				border: 1px solid #000;
				.need-resource-hd{
					height:30px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $game-color-2;
					border-bottom: 1px solid #000;
				}
				.need-resource-bd{
					.need-resource-item{
						height:30px;
						border-bottom: 1px solid #000;
						display: flex;
						align-items: center;
						&:last-child{
							border-bottom: none;
						}
						&:nth-child(2n){
							background-color: $game-color-2;
						}
						.label{
							width:80px;
							border-right: 1px solid #000;
							height:30px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.value{
							padding-left:10px;
							&.not-enough{
								color:var(--color-red2)
							}
						}
					}
				}
			}
			
			.strengthen-btn{
				background-color: #21252b;
				height:40px;
				border: 1px solid #000;
				border-radius: 4px;
				margin:20px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
			
		}
		
		.help{
			position: absolute;
			bottom:0;
			height:110px;
			border-top: 1px solid #000;
			width:100%;
			background-color: $game-color-2;
			padding:10px;
		}
		
	}
	
</style>